<template>
  <div class="verifyCode-container">
    <div class="box">
      <!--  手机号  -->
      <div class="iphoneNo">
        <div class="text tvc">
          手机号
        </div>
        <Input v-model="iphoneNo"
               placeholder="请输入手机号"
               size="large"
               clearable
               style="width: 80%">
          <Icon type="ios-contact" slot="prefix"/>
        </Input>
        <br>
        <div class="tip-text">
          {{ iphoneNoTip }}
        </div>
      </div>

      <!-- 验证码 -->
      <div class="verifyCode">
        <div class="text tvc">
          验证码
        </div>
        <Input v-model="verifyCode"
               placeholder="请输入验证码"
               size="large"
               clearable
               type="password"
               style="width: 43%">
          <Icon type="ios-contact" slot="prefix"/>
        </Input>
        <div class="send-verifyCode">
          <Button type="success"
                  size="large"
                  style="width: 100%">
            发送验证码
          </Button>
        </div>
        <br>
        <div class="tip-text">
          {{ verifyTip }}
        </div>
      </div>

      <!-- 登录 -->
      <div class="btn">
        <Button type="success"
                size="large"
                style="width: 100%">
          登录
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //组件名称
  name: "VerifyCode",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      iphoneNo: "",  //用户名
      verifyCode: "",//验证码
      iphoneNoTip: "", //提示
      verifyTip: ""    //提示
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {},
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.verifyCode-container {
  width: 100%;
}

/*盒子*/
.box {
  width: 95%;
  margin: auto;
  /*错误提示*/

  .tip-text {
    margin-top: 2px;
    color: #f13b3b;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    margin-left: 20%;
  }

  .iphoneNo {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
  }

  /*验证码*/
  .verifyCode {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .send-verifyCode {
    width: 32%;
    margin-left:4%;
  }

  /*文字*/

  .text {
    width: 20%;
    font-size: 18px;
    line-height: 40px;

    color: #333;
  }

  .btn {
    margin-top: 20px;
  }
}
</style>